<template>
  <div class="box">
    <!-- 右上box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="应急值守人员"
      style="height: 338px"
    >
      <!-- 应急值守人员 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="duty" v-for="(v, dutyList) in dutyList" :key="dutyList">
          <p>
            <span class="name">{{ v.name }}</span
            ><span class="type" :style="activation(v.type)">{{ v.type }}</span>
          </p>
          <p class="phone">
            <img src="@/assets/img/monitor/icon-7.png" alt="" /><span>{{
              v.phone
            }}</span>
          </p>
        </div>
      </div>
    </HerinContainer>
    <!-- 右下box -->
    <HerinContainer
      class="MainCoal-box"
      :delay="1"
      direction="Right"
      title="应急物资"
      style="height: 632px"
    >
      <!-- 应急物资 -->
      <div slot="content" class="MainCoal-box-content">
        <div class="search-wrap">
          <HerinSelect
            v-model="selectType"
            class="herin-select"
            :options="selectOption"
            place-holder=""
            :height="34"
            :width="111"
            @HerinSelectChange="handleSelectChange"
            style="background-color: rgba(255, 255, 255, 0.05)"
          />
          <div
            class="input-box"
            style="background-color: rgba(255, 255, 255, 0.05)"
          >
            <input v-model="searchInput" type="text" placeholder="搜索..." />
            <i
              v-show="searchInput"
              class="el-icon el-icon-close"
              @click="clearInput"
            />
            <i class="el-icon el-icon-search" @click="handleSearch" />
          </div>
        </div>
        <div class="head">
          <p style="width: 74px; text-align: left; padding-left: 0.625rem">
            名称
          </p>
          <p style="width: 42px">类型</p>
          <p style="width: 24px">数量</p>
          <p style="width: 60px">位置</p>
        </div>
        <div class="emergencyBox">
          <div
            class="emergency"
            v-for="(v, emergency) in emergency"
            :key="emergency"
          >
            <p class="name">{{ v.name }}</p>
            <p class="type" :style="activation(v.type)">{{ v.type }}</p>
            <p class="num">{{ v.num }}</p>
            <p class="gps">{{ v.gps }}</p>
          </div>
        </div>
      </div>
    </HerinContainer>
  </div>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import HerinSelect from '@/components/herinselect/HerinSelect.vue';

export default {
  components: {
    HerinSelect,
    HerinContainer
  },
  data() {
    return {
      selectOption: [
        {
          label: '全部类型',
          value: '全部类型'
        },
        {
          label: '40204工作面',
          value: '40204工作面'
        },
        {
          label: '41109工作面',
          value: '41109工作面'
        }
      ],
      selectType: '全部类型',
      searchInput: '',
      dutyList: [
        {
          name: '孙伟伟',
          type: '主负责人',
          phone: '18292000876'
        },
        {
          name: '傅彭薄',
          type: '抢险救援组',
          phone: '18292000876'
        },
        {
          name: '王乐康',
          type: '医疗救护组',
          phone: '18292000876'
        },
        {
          name: '孙伟伟',
          type: '后勤保障组',
          phone: '18292000876'
        },
        {
          name: '孙伟伟',
          type: '警戒疏散组',
          phone: '18292000876'
        },
        {
          name: '周乐心',
          type: '警戒疏散组',
          phone: '18292000876'
        }
      ],
      emergency: [
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '急救医疗用具',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '救援类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '急救医疗用具',
          type: '救援类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '担架',
          type: '救援类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '担架',
          type: '救援类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '救援类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '急救医疗用具',
          type: '救援类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '担架',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '医疗类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '担架',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '医疗类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '医疗类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '医疗类',
          num: '38',
          gps: '应急物资库'
        },
        {
          name: '防护衣',
          type: '防护类',
          num: '38',
          gps: '应急物资库'
        }
      ]
    };
  },
  computed: {
    activation() {
      return (icontent) => {
        if (icontent === '主负责人') {
          return {
            'background-color': 'rgba(0, 253, 255, .2)',
            color: 'rgba(0, 253, 255, 100)'
          };
        } else if (icontent === '防护类') {
          return {
            color: 'rgba(251, 218, 107, 100)'
          };
        } else if (icontent === '救援类') {
          return {
            color: 'rgba(46, 214, 230, 100)'
          };
        } else if (icontent === '医疗类') {
          return {
            color: 'rgba(5, 215, 131, 100)'
          };
        }
      };
    }
  },
  methods: {
    // 获取应急物资列表数据
    ListData() {
      const params = {
        dutyNo: this.selectType,
        keyWord: this.searchInput
      };
      console.log(params);
    },
    // 点击应急物资下拉菜单
    handleSelectChange() {
      this.searchInput = '';
      this.ListData();
    },
    // 点击应急物资搜索按钮
    handleSearch() {
      this.ListData();
    },
    // 点击应急物资清除搜索框
    clearInput() {
      this.searchInput = '';
      this.ListData();
    }
  }
};
</script>
<style lang="scss" scoped>
.MainCoal-box {
  &-tab {
    display: flex;
    .btn {
      @include btn;
    }
    .isbtn {
      background-color: rgba(0, 228, 255, 0.2);
      color: $cyan;
    }
  }
  &-content {
    .mouldbox {
      margin-top: 1.875rem;
    }
    .mouldbox:first-child {
      margin-top: 0.3125rem;
    }
  }
  .duty:last-child {
    margin-bottom: 0;
  }
  .duty {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(173, 173, 173, 40);
    align-items: center;
    margin-bottom: 0.74rem;
    p {
      margin-bottom: 0.74rem;
    }
    img {
      width: 0.875rem;
      height: 0.875rem;
      margin-right: 0.5rem;
    }
    .name {
      color: rgba(232, 232, 232, 100);
      font-size: 14px;
    }
    .type {
      display: inline-block;
      width: 4.8rem;
      height: 1.125rem;
      text-align: center;
      margin-left: 0.3125rem;
      border-radius: 2px;
      background-color: rgba(87, 255, 170, 0.2);
      color: rgba(87, 255, 170, 100);
      font-size: 12px;
    }
    .phone {
      color: rgba(232, 232, 232, 100);
      font-size: 14px;
    }
  }
  .head {
    display: flex;
    padding: 0.625rem 0.9375rem;
    justify-content: space-between;
    p {
      text-align: center;
      color: rgba(141, 141, 141, 100);
      font-size: 12px;
    }
  }
  .emergencyBox {
  overflow: auto;
  height: 500px;
  width: calc(100% + 10px);
  padding-right: 10px;
  .emergency:last-child{
    margin-bottom: 0;
  }
    .emergency {
      display: flex;
      justify-content: space-between;
      height: 2.125rem;
      align-items: center;
      background-color: rgba(232, 232, 232, 0.08);
      margin-bottom: 0.5625rem;
      padding: 0 0.9375rem;
      .name {
        color: rgba(248, 248, 248, 100);
        font-size: 14px;
        min-width: 5.25rem;
      }
      .type {
        font-size: 14px;
      }
      .num {
        color: rgba(255, 255, 255, 100);
        font-size: 14px;
      }
      .gps {
        color: rgba(232, 232, 232, 100);
        font-size: 12px;
      }
    }
  }

  .search-wrap {
    display: flex;
    justify-content: space-between;
    .input-box {
      width: 13.0625rem;
      height: 2.125rem;
      border: 0.0625rem solid rgba($color: #ffffff, $alpha: 0.2);
      border-radius: 0.25rem;
      position: relative;
      text-align: left;
      box-sizing: border-box;
      input {
        width: 72%;
        height: 100%;
        margin: 0 0.625rem;
        border: none;
        font-size: 0.75rem;
        color: rgba($color: $white, $alpha: 0.9);
        background-color: transparent;
        outline-width: 0rem;
      }
      input::-webkit-input-placeholder {
        font-size: 0.75rem;
        color: $secondaryTextColor;
      }
      .el-icon {
        display: inline-block;
        width: 0.875rem;
        height: 0.875rem;
        line-height: 0.875rem;
        font-size: 0.75rem;
        cursor: pointer;
        color: rgba($color: $white, $alpha: 0.5);
        position: absolute;
        top: 0.4375rem;
        &-close {
          right: 1.375rem;
        }
        &-search {
          right: 0.25rem;
          font-size: 0.75rem;
        }
      }
    }
  }
}
</style>
